<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="GBK">
	<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.masonry.min.js"/></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<style type="text/css">
		
		#container{width:860px; margin: 0 auto; }
		.item {
			border-radius:10px;
			width: 408px;
			margin: 20px 10px 10px 10px;
			float: left;
			background-color:#ffffff;
			border:solid 1px #B4BBCD;
			min-height:50px;
			text-align:justify;
			word-wrap:break-word; 
		}
		.timeline_container{
			width: 16px;
			text-align: center;
			margin: 0 auto;
			cursor:pointer;
			display: block;
		}
		.timeline{
			margin: 0 auto;
			background-color:#DCD9D3;
			display: block;
			float: left;
			height: 100%;
			left: 428px;
			margin-top: 0px;
			position: absolute;
			width: 8px;
		}
		.timeline:hover{cursor: pointer;margin: 0 auto;}
		.timeline div.plus{width: 14px;height: 14px;position: relative;left: -6px;}
		
		.rightCorner { 
			background-image: url("image/right.png");
			display: block;
			height: 15px;
			margin-left: 408px;
			margin-top: 8px;
			padding: 0;
			vertical-align: top;
			width: 13px;
			z-index:2;
			position: absolute;
		}
		.leftCorner{
			background-image: url("image/left.png");
			display: block;
			height: 15px;
			width: 13px;
			margin-left: -13px;
			margin-top: 8px;
			position: absolute;
			z-index:2;
		}
		#popup{ 
			display: block;width: 408px;
			float: left;margin-top:10px;
			background-color:#ffffff;
			border:solid 1px #A9B6D2;
			min-height:60px;display:none;
			position:absolute;margin:10px;
		}
		.deletebox{
			float:right;
			width:24px;
			height:24px;
			background-image:url(image/close.png);
			margin-top:2px;
		}
		
		.picture{
			float:left;
			width:64px;
			height:64px;
			display:inline;
			margin-top:3px;
			margin-left:5px;
			margin-bottom:3px;
		}
		.clear{
			clear:both;
		}
		.detail{
			margin-left:70px;
			width:310px;
			height:60px;
			margin-top:3px;
			background-color:#F6F2E9;
			
		}
		#image{
			width:351px;
			margin-left:260px;
		}
	</style>
	
	<title>CRM-timeline</title>
</head>
<body>
	<div class="navbar">
		<div class="navbar-inner">
		  <div class="container">
			<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			</a>
			<a href="#" class="brand">CRM</a>
			<div class="nav-collapse">
			  <ul class="nav">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">服务</a></li>
				<li><a href="#">时间线</a></li>
				
			  </ul>
			  <form action="" class="navbar-search pull-left">
				<input type="text" placeholder="Search" class="search-query span2">
			  </form>
			  <ul class="nav pull-right">
				<li class="dropdown">
	              <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:;">设置<b class="caret"></b></a>
	              <ul class="dropdown-menu">
	                <li><a href="#">组</a></li>
	                <li><a href="#">同事</a></li>
	                <li class="divider"></li>
	                <li><a href="account.jspx">个人资料</a></li>
	                <li class="divider"><br></li>
	                <li><a href="invalidate.jspx">安全退出</a></li>
	              </ul>
	            </li>
					
			  </ul>
			</div><!-- /.nav-collapse -->
		  </div>
		</div><!-- /navbar-inner -->
	</div>
	
	
	<div class="container ">
		<img id="image" style="width:64px;height:64px;margin-left:80px" src="upload/default-man.png"></img>
		<span>${employee.name },欢迎来到时光轴，这里有你的所有记录！</span>
	</div>
	
	<div id="container">
		<div class="timeline_container">
			<div class="timeline">
				<div class="plus"></div>
			</div>
		</div>
		<div class="item">
			
			<a class='deletebox' style="width:24px;height:24px;background-image:url(image/close.png)" href='#'></a>
			<div class="picture" style="background-image:url(image/jihui.png)">	
			</div>
			<div class="detail">
				<span>${employee.name}</span>
				<span>什么事</span>
				<span style="float:right">几点几分</span><br/>
			</div>
			<div class="clear"></div>
		</div>
		
		<div id="popup" class='shade'>
			<div class="Popup_rightCorner" > </div>
			记录最新动态:<br/>
			<textarea id='update'></textarea><br/>
			<input type='submit' value='提交 ' id='update_button'/>
		</div>
		

	</div>


<script type="text/javascript">

		$(function(){
			//masonry plugin call
			$("#container").masonry({
				itemSelector:".item",
			});

		
			//timeline_container add mousemove event
			$(".timeline_container").mousemove(function(e){
				var topdiv = $("#containertop").height();
				var page = e.pageY - topdiv - 130;

				$(".plus").css({
					"top": page + "px",
					"background":"url('image/plus.png')",
					"margin-left": "1px"
				});
			}).mouseout(function(){
				$(".plus").css({
					"background":"url('')"
				});
			});

			

			//injecting arrow points

			function Arrow_Points(){
				var s = $("#container").find(".item");
				$.each(s,function(i,obj){
					var posLeft = $(obj).css("left");
					if(posLeft == "0px"){
						html = "<span class='rightCorner'></span>";
						$(obj).prepend(html);
					} else {
						html = "<span class='leftCorner'></span>";
						$(obj).prepend(html);
					}
				});
			}
			Arrow_Points();

			//delete item box
			$(".deletebox").live("click",function(){
				if(confirm("Are you sure?")){
					$(this).parent().fadeOut("slow");
					//remove item block
					$("#container").masonry("remove",$(this).parent())
					//remove masonry plugin
					$("#container").masonry("reload");
					//Hiding existing arrows
					$(".rightCorner").hide();
					$(".leftCorner").hide();
					//injecting fresh arrow
					Arrow_Points();
				}
				return false;
			});

			
			//Timeline navigator on click action
			$(".timeline_container").click(function(e){
				var topdiv = $("#containertop").height();
				//Current Postion
				$("#popup").css({
					"top": (e.pageY - topdiv - 199) + "px"
				});
				$("#popup").fadeIn();//Popup block show
				//textbox focus
				$("#update").focus();
			});

			
			//Mouseover no action
			$("#popup").mouseup(function(){
				return false;
			});

			
			//outside action of the popup block
			$(document).mouseup(function(){
				$("#popup").hide();
			});

			

			//update button action
			$("#update_button").live("click",function(){
				//textbox value
				var x = $("#update").val();				
				//ajax part
				$("#container").prepend('<div class="item"><a class="deletebox" href="#"></a>' + '<div class="picture"></div><div class="detail"><span>谁做了</span><span>' + x + '</span><span style="float:right">几点几分</span><br/></div></div></div>');
				//reload masnory
				$("#container").masonry("reload");
				//Hiding existing arrows
				$(".rightCorner").hide();
				$(".leftCorner").hide();
				//injecting fresh arrows
				Arrow_Points();
				//clear popup text box value
				$("#update").val("");
				//popup hide
				$("#popup").hide();
				return false;
			});

		});

	</script>

</body>
</html>